<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVG</title>
    <script src="scripts/snap.svg.js"></script>
</head>

<body>

<svg id="svgout" width="1600" height="1600" version="1.1" xmlns="http://www.w3.org/2000/svg">

<!--    <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>-->
<!--    <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>-->
<!--    <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>-->
<!--    <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>-->
<!--    <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>-->
<!--    <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>-->
<!--    <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>-->
<!--    <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>-->
<!--    <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>-->
<!--    <path d="M10 315-->
<!--           L 110 215-->
<!--           A 30 50 0 0 1 162.55 162.45-->
<!--           L 172.55 152.45-->
<!--           A 30 50 -45 0 1 215.1 109.9-->
<!--           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="5"/>-->
    <defs>
        <marker id="arrowhead" markerWidth="10" markerHeight="7"
                refX="0" refY="3.5" orient="auto">
            <polygon points="0 0, 10 3.5, 0 7" />
        </marker>
    </defs>

    <path id="my_path" d="M100 300 C 300 400, 10 800, 500 600" stroke="black" stroke-width="5" fill="transparent"
          style="marker-end: url(#arrowhead);"/>
    <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
    <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
    <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
    <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"/>

    <rect x="600" y="100" width="100" height="100" stroke="blue" fill="purple"
          fill-opacity="0.5" stroke-opacity="0.80"/>
    <rect x="800" height="180" y="100" width="180" style="stroke: black; fill: red;"/>
    <text x="800"  y="310">text:
        <tspan font-weight="bold" fill="red">This is bold and red</tspan>
    </text>


    <text>
        <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
            <tspan font-weight="bold" fill="red">This is bold and red fgdgfdgdfgdfgdfgfdgggggggfdgdfgdfgdfgdfgdf</tspan>
        </textPath>
    </text>
</svg>
    <script>
        let s = Snap("#svgout");
        let offset = 50;
        let g = s.g().attr({ stroke: 'gray' });
        for (let i = 0; i <=1600 / offset; i++) {
            g.line(i * offset, 0, i * offset, 1600)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.line(0, i * offset, 1600, i * offset)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.text(0, i * offset, i * offset);
            g.text(i * offset, 20, i * offset);
        }
    </script>
</body>

</html>